<template>
	<view>
		<uni-segmented-control :current="current" :values="bannerList" @clickItem="handleControl" styleType="text">
		</uni-segmented-control>
		<view class="" v-show="current == 0">
			<view class="OneList">
				<!-- {{bodyList}} -->
				<image :src="bodyList[0].poemImg" mode=""></image>
				<view class="o1">{{bodyList[0].niceSentence}}</view>
				<view>《 {{bodyList[0].poemName}}》</view>
			</view>
			<view class="ReadList" v-for="item in bodyList">
				<view class="readListTitle">
					<view @click="handlepoemName('poemName',item)">{{item.poemName}}</view>
					<view @click="handlepoemName('poemAuthor',item)">{{item.poemAuthor}}</view>
				</view>
				<view class="two">
					{{item.intro}}
				</view>
				<view class="readImg">
					<view>
						<image class="readimg" src="../../static/love.png" mode=""></image>
					</view>
					<!-- 播放 -->
					<view @click="PlayBack('悯农二首·其二')">
						<image class="readimg" src="../../static/bofang.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="current == 1">
			<my-topSwipe :sortList="sortList"></my-topSwipe>
			<view class="niceSentence" v-for="(item,index) in bodyList" :key="index">
				<view @click="readPasher">《{{item.poemName}}》</view>
				<view>&nbsp;&nbsp;{{item.ancientDynasty}} · {{item.poemAuthor}}</view>
				<view class="lsstView">
					<view>&nbsp;&nbsp;{{item.niceSentence}}</view>
					<view @click="collectPharse">收藏</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { defineComponent, ref } from 'vue'
	import { getPoemsList, httpGetPoemType, httpPoemData } from '../../API/poemApi'
	export default defineComponent({
		setup() {
			const current = ref(0)
			const bannerList = ref(['读书破万卷', '名句藏锋芒'])
			const bodyList = ref()
			const url = ref()
			const sortList = ref([])
			// 方法
			const handleControl = ((e) => {
				console.log(e);
				current.value = e.currentIndex
			})
			// 点击收藏
			const collectPharse = (() => {
				console.log('点击了收藏');
			})
			// 点击诗名查看
			const readPasher = (() => {
				console.log(111);
				uni.navigateTo({
					url: '../details/details?poemName=' + '李白'
				})
			})
			// 点击播放
			const PlayBack = ((poemName : any) => {
				// let name = JSON.stringify(poemName)
				// console.log(name);
				uni.navigateTo({
					url: '/pages/Playmusic/Playmusic?poemName=' + poemName
				})
			})
			// 获取古诗列表
			const getPoemData = (async () => {
				let res : any = await httpPoemData()
				console.log("res111", res.data.rows);
				bodyList.value = res.data.rows
			})
			const handlepoemName = ((type, item) => {
				console.log("type===>", type);
				console.log(item);
				if (type == 'poemName') {
					uni.navigateTo({
						url: '/pages/poemDetail/poemDetail?poemName=' + item.poemName
					})
				}
				if (type == 'poemAuthor') {
					uni.navigateTo({
						url: '/pages/poemDetail/poemDetail?poemAuthor=' + item.poemAuthor
					})
				}
			})
			onLoad(async () => {
				getPoemData()
				let res : any = await httpGetPoemType()
				sortList.value = res.data.data[0]

			})
			return {
				bannerList,
				current,
				sortList,
				getPoemData,
				bodyList,
				handleControl,
				url,
				collectPharse,
				readPasher,
				PlayBack,
				handlepoemName
			}
		}
	})
</script>

<style lang="less">
	.OneList {
		/* display: flex; */
		text-align: center;
		// margin-top: 20rpx;
		border-bottom: 1px solid #ccc;
		width: 90%;
		margin: 40rpx auto;
		padding-bottom: 10px;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 25vh;
		}

		.o1 {
			font-size: 1.1em;
			margin: 40rpx 0rpx;

		}

		view:nth-child(3) {
			font-size: .8em;
		}
	}

	.ReadList {
		width: 90%;
		margin: 10rpx auto;
		border-bottom: 1px solid #ccc;
		padding-bottom: 20rpx;

		.readListTitle {
			display: flex;

			view {
				display: inline;
				vertical-align: sub;
				font-size: 40rpx;
			}

			view:nth-child(2) {
				font-size: .7em;
				color: #d0ae53;
				margin-left: 20rpx;
			}
		}

		.two {
			margin-top: 20rpx;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: '宋体';
		}
	}




	.niceSentence {
		// background-color: #d0ae53;
		width: 90%;
		margin: 20rpx auto;
		border-top: 1px solid #ccc;

		view {
			margin-top: 20rpx;
			font-size: .9em;
		}

		view:nth-child(1) {
			font-weight: 700;
		}

		view:nth-child(2) {
			color: #d0ae53;
			font-size: .4em;
		}

		.lsstView {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view:nth-child(1) {
				color: #ccc;
				font-size: .8em;
			}

			view:nth-child(2) {
				border: 1px solid #ccc;
				padding: 3rpx 3rpx;
			}
		}
	}

	.readImg {
		display: flex;

		// text-align: center;
		// align-items: center;
		.readimg {
			width: 30rpx;
			height: 30rpx;
			margin: 10rpx 20rpx;
			// margin-top: 20rpx;
		}
	}
</style>